<template>
  <a-menu
      class="max-height fortune-sider-menu"
      mode="inline"
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys">
    <a-sub-menu
        v-for="subMenu in subMenus"
        :key="subMenu.name">
      <template #icon>
        <laptop-outlined/>
      </template>
      <template #title>{{ subMenu.name }}</template>
      <a-menu-item
          @click="$router.push(menuItem.path)"
          v-for="menuItem in filterEnable(subMenu.menuItems)"
          :title="menuItem.name"
          :key="menuItem.name">
        {{ menuItem.name }}
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script>
import {LaptopOutlined} from '@ant-design/icons-vue';
import {ref} from "vue";

export default {
  name: 'SideMenu',
  setup () {
    const defaultAppConfig = require('../../assets/config/menu.json');
    const horizontalMenu = defaultAppConfig['horizontal'];
    const inlineMenu = defaultAppConfig['inline'];
    return {
      horizontalMenu,
      inlineMenu,
      selectedKeys: ref([]),
      openKeys: ref([])
    }
  },
  components: {
    LaptopOutlined
  },
  methods: {
    filterEnable (menus) {
      let ret = [];
      for (let menusKey in menus) {
        let menu = menus[menusKey];
        if (menu.enable !== false) {
          ret.push(menu);
        }
      }
      return ret;
    }
  },
  computed: {
    subMenus () {
      return this.filterEnable(this.inlineMenu.menus);
    }
  }
}
</script>

<style scoped>
.fortune-sider-menu {
  /*/*/
  border-right: 0;
}
</style>
